<script>
import { mapState } from 'vuex'

export default {
  name: 'chauBasicInfo',
  computed: {
    ...mapState('chauffeurStore', ['chauffeurDetail'])
  }
}
</script>

<template>
  <div class="chau-basic-info">
    <el-row :gutter="30" justify="center">
      <el-col class="yjddrq" :span="6"><span>员工编号：</span><label>{{ chauffeurDetail.userId }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机名称：</span><label>{{ chauffeurDetail.name}}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>所属机构：</span><label>{{ chauffeurDetail.agency && chauffeurDetail.agency.name}}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机电话：</span><label>{{chauffeurDetail.mobile }}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机年龄：</span><label>{{ chauffeurDetail.age}}</label></el-col>
      <el-col class="yjddrq" :span="6"><span>司机状态：</span><label>{{ chauffeurDetail.workStatus === 0 ? '休息' : '上班'}}</label></el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.yjddrq {
  float: left;
  color: #20232a;
  font-size: 14px;
  margin-top: 25px;
}

.yjddrq label {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #818693;
}
</style>
